<template id="one-editor">
    <tinymce
        @input="input"
        v-model="value"
        :plugins="myPlugins"
        :toolbar1="myToolbar1"
        :toolbar2="myToolbar2"
        :other="myOtherOptions"
    >
    </tinymce>
</template>

<!-- 引入组件 -->
<script src="__STATIC__/lib/tinymce@6.0.1/tinymce.min.js"></script>
<script src="__STATIC__/lib/tinymce@6.0.1/vue-easy-tinymce.min.js"></script>
<script>
    Vue.component('one-editor', {
        template: '#one-editor',
        components: {
            tinymce: VueEasyTinyMCE,
        },
        props: {
            value: {
                type: String,
                default: '',
            },
            isClear: {
                type: Boolean,
                default: false,
            },
            width: {
                type: String,
                default: '750',
            },
            height: {
                type: String,
                default: '1080',
            },
        },
        data() {
            return {
                editor: null,
                editorContent: null,
                hasChange: false,
                hasInit: false,
                myPlugins: 'code image media',
                myToolbar1:
                    'code image media undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table charmap emoticons pagebreak insertdatetime  preview | fullscreen | lineheight',
                myToolbar2: '',
                myOtherOptions: {
                    language: 'zh_CN',
                    height: 650,
                    min_height: 400,
                    images_upload_url: "{:url('system/annex/upload')}",
                },
            };
        },
        watch: {},
        mounted() {
            this.myOtherOptions.height = this.height;
        },
        created() {},
        methods: {
            input(value) {
                this.$emit('change', value);
            },
        },
    });
</script>
